<template>
    <el-container class="news">

      <el-main v-show="show">
        <back></back>
        <h5>消息提醒</h5>
        <ul v-if="haveMsg == true">
          <li v-for="(i,k) in lists":key="i.msgId" @click="goDetail(i)">
            <span><img :src="i.url" alt=""></span>
            <span>
              <p>
                <!--<i v-if="i.title == 1">会员消息</i>-->
                <!--<i v-if="i.title == 2">系统消息</i>-->
                <!--<i v-if="i.title == 3">垃圾消息</i>-->
                <i>{{i.title}}</i>
                <b>{{i.date}}</b>
              </p>
              <p>{{i.msg}}</p>
            </span>
          </li>
        </ul>
        <ul v-if="haveMsg == false">
          <p style="color: #9ba5b0;font-size: 16px;margin-top: 25px">暂无消息</p>
        </ul>
      </el-main>
    </el-container>
</template>

<script>
  import back from '@/components/back'
    export default {
        data(){
          return{
            lists:[],
            haveMsg:false,
            show:false,
            id:''
          }
        },
      methods:{
        goDetail(i){
          let params = {
            msgId:i.msgId
          };
          this.$axios.post('/api/front/msg/read',this.qs.stringify(params))
            .then(res => {
            })
          this.$router.push({name:'newsDetail',params:{info:i}})
        }
      },
      computed:{
          id(){
            return this.$store.state.merchantId
          }
      },
      mounted(){
        let params = {
          merchantId:this.id
        }
        this.$axios.post('/api/front/msg/list',this.qs.stringify(params))
          .then(res => {
            console.log(res.data)
            this.show = true;
            if(res.data.obj.list.length == 0){
                this.haveMsg = false
            }else {
              this.haveMsg = true
              this.lists = res.data.obj.list
            }

          })
      },
      created(){
        this.id = localStorage.getItem("merchantId")
      },
      components:{
          back,
      }
    }
</script>

<style scoped lang="scss">
.el-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #DCDFE6;
  .el-main{
    h5{
      font-size: 18px;
      text-align: left;
      margin: 0;
      padding: 20px 0;
      padding-left: 15px;
      background: #fff;
      border-bottom: 1px solid #ccc;
      margin-bottom: 2px;
    }
    ul{
      li{
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        background: #fff;
        margin-bottom: 2px;
        box-shadow: 1px 1px 3px #ccc;
        span{
          padding: 0 15px;
          &:nth-child(1){
            display: flex;
            flex-direction: column;
            justify-content: center;
            img{
              width: 40px;
              height: 40px;
              border-radius: 6px;
            }
          }
          &:nth-child(2){
            width: 80%;
            text-align: left;
            padding-left: 0;
            p{
              &:nth-child(1){
                display: flex;
                flex-direction: row;
                i{
                  width: 50%;
                }
                b{
                  width: 50%;
                  text-align: right;
                }
              }
              &:nth-child(2){
                display: inline-block;
                margin-top: 0;
                width: 250px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
</style>
